<template>
  <div class="stbox">
    <el-row :gutter="23">
      <div class="pmd">
          <el-carousel :interval="5000" type="card" trigger="click" height="800px" width="10px">
            <el-carousel-item>
              <img src="../../assets/pmd/20191105191333920389_Tiguanpower1200761.jpg" class="carouselimg" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../assets/pmd/20191106185535699477_PC.jpg" class="carouselimg" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../assets/pmd/20200601201546779979_86a8b2f.jpg" class="carouselimg" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../assets/pmd/8.jpg.asset.1569569071854.jpg" class="carouselimg" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../assets/pmd/cq5dam.resized.img.1680.large.time1602425773621.jpg" class="carouselimg" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../assets/pmd/20200926012220412169_01PC.jpg" class="carouselimg" />
            </el-carousel-item>
          </el-carousel>
      </div>
    </el-row>
    <div>
      <el-row :gutter="23">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" id="payEchart"></div>
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" id="payNumEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
    export default {
        name: "welcome",
        data() {
            return {

            }
        },
        // 导入组件
        components: {
            // 点聚合组件
        },
        // 创建完毕状态(里面是操作)
        created() {

        },
        // 挂载结束状态(里面是操作)
        mounted() {
            const _this = this;

            var echarts = require('echarts');

            //左圆
            axios.get(localStorage.getItem("globalUrl") + "login/findAllBySQL").then(function(resp){

                let respObject = resp.data.data;
                let respArr = [];
                Object.keys(respObject).map(key=>{
                    respArr.push(respObject[key]);
                })

                _this.leftHomeSector(respArr);
            });

            //右圆
            axios.get(localStorage.getItem("globalUrl") + "login/findAllBySQL2").then(function(resp){

                let respObject = resp.data.data;
                let respArr = [];
                Object.keys(respObject).map(key=>{
                    respArr.push(respObject[key]);
                })

                _this.rightHomeSector(respArr);

            });

        },
        // 里面的函数只有调用才会执行
        methods: {

            leftHomeSector(respArr){

                var echarts = require('echarts');

                var getpayCharts = echarts.init(document.getElementById('payEchart'));

                getpayCharts.setOption({
                    backgroundColor: '#2c343c',
                    title: {
                        text: '统计查询用户訂單數量占比',
                        left: 10,
                        top: 5,
                        textStyle: {
                            fontSize: 12,
                            color: '#ccc'
                        }
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },

                    /*visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },*/
                    series: [
                        {
                            name: '用户訂單數量占比',
                            type: 'pie',
                            radius: '80%',
                            center: ['50%', '50%'],
                            data:
                                respArr.sort(function (a, b) { return a.value - b.value; }),

                            // [{"name":"孙尚香","value":11700.0},{"name":"貂蝉","value":9000.0},{"name":"曹操","value":546000.0},{"name":"贾诩","value":0.0},{"name":"魏承谟","value":0.0},{"name":"郭嘉","value":0.0},{"name":"水镜先生","value":37517.0}].sort(function (a, b) { return a.value - b.value; }),
                            // [{name:"刘备",value:555000.0},{name:"关羽",value:20540.0},{name:"张飞",value:0.0},{name:"赵云",value:0.0},{name:"黄忠",value:23074.0},{name:"骁勇",value:5603.0}].sort(function (a, b) { return a.value - b.value; }),
                            /*[
                            { value: 555, name: '刘备' },
                            { value: 310, name: '关羽' },
                            { value: 274, name: '张飞' },
                            { value: 235, name: '赵云' },
                            { value: 235, name: '黄忠' },
                            { value: 100, name: '骁勇' }
                        ].sort(function (a, b) { return a.value - b.value; }),*/
                            /*[
                            { value: 335, name: '支付宝1' },
                            { value: 310, name: '银商二维码' },
                            { value: 274, name: '会员' },
                            { value: 235, name: '微信支付' },
                            { value: 100, name: 'Pos通' }
                        ].sort(function (a, b) { return a.value - b.value; }),*/
                            roseType: 'radius',
                            label: {
                                normal: {
                                    textStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                }
                            },
                            itemStyle: {
                                normal: {
                                    // '#c23531'
                                    color: 'yellow',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(255, 255, 255, 0.3)'
                                }
                            },

                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                });
            },


            rightHomeSector(respArr){

                var echarts = require('echarts');

                var getpayNumCharts = echarts.init(document.getElementById('payNumEchart'));

                getpayNumCharts.setOption({
                    backgroundColor: '#2c343c',
                    title: {
                        text: '统计查询项目新闻占比',
                        left: 10,
                        top: 5,
                        textStyle: {
                            fontSize: 12,
                            color: '#ccc'
                        }
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },

                    /*
                    //扇形框变色
                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },*/
                    series: [
                        {
                            name: '项目新闻占比',
                            type: 'pie',
                            radius: '80%',
                            center: ['50%', '50%'],
                            data: respArr.sort(function (a, b) { return a.value - b.value; }),
                            /*[
                                { value: 335, name: '支付宝' },
                                { value: 310, name: '银商二维码' },
                                { value: 274, name: '会员' },
                                { value: 235, name: '微信支付' },
                                { value: 100, name: 'Pos通' }
                            ].sort(function (a, b) { return a.value - b.value; }),*/
                            roseType: 'radius',
                            label: {
                                normal: {
                                    textStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#c23531',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },

                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                });
            }


        }
    };
</script>

<style>

  .stbox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  .stbgc {
    background-color: #fff;
    height: 60px;
    line-height: 60px;
    border-radius: 5px;
    padding: 0px 16px;
  }
  .stsearch {
    text-align: center;
  }
  .text-c {
    text-align: center;
  }
  .st-gbox {
    background-color: #fff;
    margin-top: 20px;
    border-radius: 5px;
    height: 30vh;
    box-sizing: border-box;
    padding: 10px;
  }
  .cavasbox {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
  .paybox {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    margin-top: 20px;
    height: 32vh;
  }
</style>
